<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改商品</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //获取商品初始值
        let initInputGoodsName = $("#inputGoodsName").val();
        let initInputGoodstype = $("#inputGoodstype").val();
        let initInputGoodsStock = $("#inputGoodsStock").val();
        let initInputGoodsPrice = $("#inputGoodsPrice").val();
        let initInputGoodsDescribe = $("#inputGoodsDescribe").val();

        //异步获取商品分类信息
        $.ajax({
            url:"/admin/goodstype/getAllGoodstype",
            method:"POST",
            data:null,
            success:function (data){
                let html = "";
                $.each(data, function (index,goodstype){
                    html = html +
                        "<option value='" + goodstype.tid + "'>" + goodstype.goodstypeName + "</option>";
                })
                $("#inputGoodstype").html(html);
                $("#inputGoodstype").val(initInputGoodstype);
            }
        });

        //修改按钮点击响应事件
        $("#updata").click(function (){
            //获取页面数据,并去除空格
            let gid = $("#gid").text();
            let inputGoodsName = $.trim($("#inputGoodsName").val());
            let inputGoodstype = $("#inputGoodstype").val();
            let inputGoodsStock = $.trim($("#inputGoodsStock").val());
            let inputGoodsPrice = $.trim($("#inputGoodsPrice").val());
            let inputGoodsDescribe = $.trim($("#inputGoodsDescribe").val());

            //判断是否修改数据
            if (inputGoodsName != initInputGoodsName || inputGoodstype != initInputGoodstype ||
                inputGoodsPrice != initInputGoodsPrice || inputGoodsStock != initInputGoodsStock ||
                inputGoodsDescribe != initInputGoodsDescribe){
                //判断是否有空数据
                if (inputGoodsName != "" && inputGoodsPrice != "" && inputGoodsStock != ""){
                    //封装数据
                    let formData = new FormData;
                    formData.append("gid",gid);
                    formData.append("tid",inputGoodstype);
                    formData.append("goodsName",inputGoodsName);
                    formData.append("goodsStock",inputGoodsStock)
                    formData.append("goodsPrice",inputGoodsPrice);
                    formData.append("goodsDescribe",inputGoodsDescribe);
                    $.ajax({
                        url: "/admin/goods/updata",
                        method: "POST",
                        data: formData,
                        processData: false,   // jQuery不要去处理发送的数据
                        contentType: false,   // jQuery不要去设置Content-Type请求头
                        success:function (data){
                            if (data){
                                location.href = "/admin/goods";
                            }else {
                                $("#modalText").text("有重复商品名！");
                                $("#myModal").modal('show');
                            }
                        }
                    })
                }else {
                    $("#modalText").text("商品名,商品库存和商品价格不能为空！");
                    $("#myModal").modal('show');
                }
            }else {
                $("#modalText").text("未修改数据！");
                $("#myModal").modal('show');
            }
        });

        //上传图片按钮点击事件
        $("#upload").click(function (){
            console.log($("#goodsImg")[0].files[0].size)
            //获取商品gid
            let gid = $("#gid").text();
            //判断是否选择图片
            if ($("#goodsImg")[0].files[0] != null && $("#goodsImg")[0].files[0].size < 3153920){
                let formData = new FormData;
                formData.append("gid",gid);
                formData.append("goodsImg",$("#goodsImg")[0].files[0]);
                $.ajax({
                    url:"/admin/goods/updataGoodsImg",
                    method:"POST",
                    data:formData,
                    processData: false,   // jQuery不要去处理发送的数据
                    contentType: false,   // jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if (data){
                            $("#modalText").text("上传成功，已修改");
                            $("#myModal").modal('show');
                        }else {
                            $("#modalText").text("上传失败，图片过大");
                            $("#myModal").modal('show');
                        }
                    }
                })
            }else {
                $("#modalText").text("未选择图片或图片超过3M");
                $("#myModal").modal('show');
            }
        });

        //重置按钮点击响应事件
        $("#reset").click(function (){
            //将页面文本框内容清空
            $("#inputGoodsName").val(initInputGoodsName);
            $("#inputGoodstype").val(initInputGoodstype);
            $("#inputGoodsStock").val(initInputGoodsStock);
            $("#inputGoodsPrice").val(initInputGoodsPrice);
            $("#inputGoodsDescribe").val(initInputGoodsDescribe);
        })
    })
</script>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <form>
                <div>
                    <label style="font-size: 20px;">商品编号：</label>
                    <label id="gid" style="font-size: 20px;" th:text="${goods.getGid()}"></label>
                </div>
                <div class="card" style="width: 10rem;">
                    <img class="card-img-top" th:src="${goods.getGoodsImg()}" alt="商品图片">
                </div>
                <div class="form-group">
                    <label for="inputGoodsName">商品名称</label>
                    <input type="text" class="form-control" id="inputGoodsName" th:value="${goods.getGoodsName()}" placeholder="请输入商品名称">
                </div>
                <div class="form-group">
                    <label for="inputGoodstype">商品分类：</label>
                    <select id="inputGoodstype" class="form-control">
                        <option th:value="${goods.getTid()}"></option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="inputGoodsPrice">商品库存</label>
                    <input type="number" class="form-control" id="inputGoodsStock" th:value="${goods.getGoodsStock()}" placeholder="请输入商品价格">
                </div>
                <div class="form-group">
                    <label for="inputGoodsPrice">商品价格</label>
                    <input type="text" class="form-control" id="inputGoodsPrice" th:value="${goods.getGoodsPrice()}" placeholder="请输入商品价格">
                </div>
                <div class="form-group">
                    <label for="inputGoodsDescribe">商品描述</label>
                    <textarea class="form-control" id="inputGoodsDescribe" th:text="${goods.getGoodsDescribe()}" rows="3"></textarea>
                </div>

                <div class="form-group">
                    <label for="goodsImg">修改商品图片：</label>
                    <input type="file" class="form-control-file" id="goodsImg">
                    <span id="upload" class="btn btn-dark btn-sm">上传图片</span>
                </div>

                <button id="updata" type="button" class="btn btn-primary">修改</button>
                <button id="reset" type="button" class="btn btn-primary">重置</button>
            </form>
        </main>
    </div>
</div>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>